<template>
  <div id="editor">
    <div ref="editor" style="text-align:left"></div>
  </div>
</template>
<script>
  import E from 'wangeditor'
  export default {
    name: 'Editor',
    data () {
      return {
        editorContent:"",
        baseURL:window.baseURL,
        thisEditor:null
      }
    },
    props: ["content","setValue"],    //接收父组件的方法
    mounted () {
      var self = this;
      var editor = new E(this.$refs.editor)        //创建富文本实例
      editor.customConfig.onchange = (html) => {
        this.editorContent = html
        this.setValue(html);
      }
      //editor.$textElem.attr('contenteditable', this.isEditor)
      editor.customConfig.menus = [          //菜单配置
        'head',  // 标题
        'fontSize',  // 字号
        'fontName',  // 字体
        'underline',  // 下划线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'image',  // 插入图片
        'table',  // 表格
        'undo',  // 撤销
       // 'redo'  // 重复
      ]
      editor.customConfig.debug = true
      //editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
      editor.customConfig.uploadImgServer = self.baseURL + '/file/fileUpload'
      editor.customConfig.uploadImgMaxLength = 1//限制上传文件多少
      editor.customConfig.uploadImgParams = {
        type: 'img'
      }
      editor.customConfig.uploadFileName = 'file'
      editor.customConfig.customAlert = function (info) {
        // info 是需要提示的内容
        self.$message.error('图片上传：' + info)
      }
      editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          var url = self.baseURL+"/file/download?accid="+result.data
          insertImg(url)

        }
      }
      editor.create()
      self.thisEditor = editor;
      editor.txt.html(self.content)
    },
    watch:{
      content:{
        handler(newValue,oldValue){
          if(this.thisEditor){
            this.thisEditor.txt.html(this.content);
          }
        }
      }
    }
  }
</script>
<style>
#editor /deep/.w-e-text-container{
  min-height: 226px;
  height: 226px !important;
  z-index: 100 !important;
}
</style>

